import React, { useState, useEffect } from "react";
import { NavBar, Tabs, Toast } from "antd-mobile";
import { useLocation } from "react-router-dom";
import HomePage from "./components/HomePage";
import ComponentActivity from "./components/Activity";
import ComponentTickets from "./components/Tickets";
import PersonalComponent from "./components/Personal";
import { ReactComponent as HomeIcon } from "../../asset/imgs/icon_home.svg";
import { ReactComponent as ActivityIcon } from "../../asset/imgs/icon_activity.svg";
import { ReactComponent as TicketsIcon } from "../../asset/imgs/icon_tickets.svg";
import { ReactComponent as PersonalIcon } from "../../asset/imgs/icon_personal.svg";
import "./style.scss";

const iconColor = getComputedStyle(document.documentElement)
  .getPropertyValue("--themeColor")
  .trim();

const Home = () => {
  const [activeKey, setActiveKey] = useState("");
  const [show, setShow] = useState(false);

  let location: any = useLocation();
  let { current = "" } = location?.state || {};

  useEffect(() => {
    setActiveKey(current || "home");
    location = null;
    setShow(true);
    return () => {
      setShow(false);
    };
  }, [current]);

  // useEffect(() => {
  //     const funcResize = (event: any) => {
  //       if (event.persisted) {
  //           // 页面被缓存并重新加载
  //           document.body.style.display = 'none'; // 隐藏内容
  //           setTimeout(() => {
  //               document.body.style.display = 'block'; // 重新显示内容
  //           }, 0);
  //       }
  //   }
  //     window.addEventListener("pageshow", funcResize);
  //     return () => {
  //       window.removeEventListener("pageshow", funcResize);
  //     };
  // }, []);

  if (!show) return null;
  return (
    <div className="container_home">
      {activeKey && (
        <Tabs
          activeKey={activeKey}
          onChange={(key: any) => {
            setActiveKey(key);
            window.history.replaceState(null, ""); // 清除地址栏参数不会引起页面刷新，而且不会在history中留下记录
            window.scrollTo(0, 0); // 切换tab时滚动条回到顶部
          }}
        >
          <Tabs.Tab
            key="home"
            title={
              <div>
                <HomeIcon
                  width={50}
                  height={50}
                  fill={activeKey === "home" ? iconColor : "#ADAFBB"}
                />
                <div>主页</div>
              </div>
            }
          >
            <HomePage />
          </Tabs.Tab>
          <Tabs.Tab
            key="activity"
            title={
              <div>
                {/* <img
                  src={
                    activeKey === "activity"
                      ? require("@/asset/imgs/icon_activity_active.png")
                      : require("@/asset/imgs/icon_activity.png")
                  }
                ></img> */}
                <ActivityIcon
                  width={50}
                  height={50}
                  fill={activeKey === "activity" ? iconColor : "#ADAFBB"}
                />
                <div>特典会</div>
              </div>
            }
          >
            <ComponentActivity />
          </Tabs.Tab>
          <Tabs.Tab
            key="tickets"
            title={
              <div>
                {/* <img
                  src={
                    activeKey === "tickets"
                      ? require("@/asset/imgs/icon_tickets_active.png")
                      : require("@/asset/imgs/icon_tickets.png")
                  }
                ></img> */}
                <TicketsIcon
                  width={50}
                  height={50}
                  fill={activeKey === "tickets" ? iconColor : "#ADAFBB"}
                />
                <div>票夹</div>
              </div>
            }
          >
            <ComponentTickets />
          </Tabs.Tab>
          <Tabs.Tab
            key="personal"
            title={
              <div>
                {/* <img
                  src={
                    activeKey === "personal"
                      ? require("@/asset/imgs/icon_personal_active.png")
                      : require("@/asset/imgs/icon_personal.png")
                  }
                /> */}
                <PersonalIcon
                  width={50}
                  height={50}
                  fill={activeKey === "personal" ? iconColor : "#ADAFBB"}
                />
                <div>我的</div>
              </div>
            }
          >
            <PersonalComponent />
          </Tabs.Tab>
        </Tabs>
      )}
    </div>
  );
};

export default Home;
